import { Card, Flex, Grid, Image } from 'react-vant';
import './My.css';
import { useAppSelector } from '@/hooks/storeHooks';
import { getBusinessImagePath, getDefaultAvatarPath } from '@/utils/common';
import { CommentO, OrdersO, StarO, UnderwayO } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';

const My: React.FC = () => {
  const userInfo: ResponseBusinesssDto = useAppSelector((state) => state.auth.userInfo);
  const navigate = useNavigate();

  return (
    <>
      <div className="my-container">
        <Card className="use-info" round>
          <Flex>
            <div className="info-avatar">
              <Image
                src={
                  userInfo.avatar != null
                    ? getBusinessImagePath(userInfo.id, userInfo.avatar as string)
                    : getDefaultAvatarPath()
                }
              />
            </div>
            <div className="info-detail">
              <div className="detail-item">
                <span className="label">{userInfo.name ? userInfo.name : '无昵称'}</span>
              </div>
              <div className="detail-item">
                <span className="label">账号：{userInfo.account}</span>
              </div>
            </div>
          </Flex>
        </Card>
        <Card className="ability" round>
          <Grid>
            <Grid.Item icon={<OrdersO />} text="订单" onClick={() => navigate('/order')} />
            <Grid.Item icon={<UnderwayO />} text="历史" onClick={() => navigate('/history')} />
            <Grid.Item icon={<StarO />} text="收藏" onClick={() => navigate('/collection')} />
            <Grid.Item icon={<CommentO />} text="评论" onClick={() => navigate('/myComment')} />
          </Grid>
        </Card>
      </div>
    </>
  );
};

export default My;
